@import (reference) '../style/variables.less';

.@{prefix}-search {
	margin-left: 20px;
	position: relative;
	display: inline-block;

	&-input {
		width: 200px;
		height: 32px;
		padding: 0 38px 0 14px;
		color: @c-heading;
		font-size: 14px;
		border: 0;
		outline: none;
		transition: all 0.2s;
		border-radius: 16px;
		background: url('')
			#f5f6f7 no-repeat right 14px center / 16px;
		appearance: none;
	}

	> ul {
		list-style: none;
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 10;
		margin: 8px 0 0;
		min-width: 280px;
		max-width: 400px;
		padding: 6px 0;
		background-color: #fff;
		border: 1px solid @c-border;
		border-radius: 1px;
		box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
		box-sizing: border-box;

		&:empty {
			display: none;
		}

		li {
			font-size: 15px;

			a {
				display: block;
				padding: 6px 20px;
				color: @c-secondary;
				text-decoration: none;
				transition: background-color 0.3s;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&:hover {
					color: @c-primary;
					background-color: @c-light-bg;
				}
			}

			span:first-child {
				position: relative;
				display: inline-block;
				max-width: 50%;
				padding-right: 26px;
				vertical-align: -0.37em;
				overflow: hidden;
				text-overflow: ellipsis;
				opacity: 0.8;

				&::after {
					content: '>';
					position: absolute;
					top: 50%;
					right: 6px;
					opacity: 0.6;
					transform: translateY(-54%);
				}
			}
		}
	}

	@media only screen and (max-width: 1024px) {
		margin-right: -14px;

		> input:not(:focus) {
			width: 32px;
			padding-right: 0;
			box-shadow: none;
			cursor: pointer;
			background-position: right 8px center;

			+ ul {
				transition: 0.1s visibility;
				visibility: hidden;
			}
		}
	}

	@media @mobile {
		position: absolute;
		top: 9px;
		right: 24px;
		display: block !important;
	}
}
